<template>
    <div :id="'ddd'+psMsg" class="echart-testa"></div>
</template>

<script>
  import echarts from 'echarts';
  import {mapGetters} from 'vuex';
  export default {
    name: "TemperatureChart",
    computed: {
      ...mapGetters(['ScreenWidth'])
    },
    props:['psMsg','plcdatanum'],
    data() {
      return {
        echarts: null,
        num:100,
        showB:false,
        wdsumnum:100,
        llsumnum:1400,
        ylsunnum:1
      }
    },
    watch: {
      'ScreenWidth': function (newVal) {
        this.echarts.resize();
      },
      'plcdatanum':function(newVal){
        if(newVal[0].length==1){
          this.showB=false;
        }else{
          this.showB=true;
        }
        this.setOption(newVal);
      }
    },
    mounted() {
      window.onresize = () => {
        this.$store.dispatch('plc/setScreenWidth',document.body.clientWidth );//调取方法
      };
      this.echarts = echarts.init(document.getElementById('ddd'+this.psMsg));
      this.getData();

    },
    methods: {
      getData(dd) {
        let data = dd || this.plcdatanum;
        this.setOption(data);
      },
      setOption(data) {
        /*let wdsumnum=this.num;*/
        let wdsumnum=this.wdsumnum;
        let llsunnum=this.llsumnum;
        let ylsunnum=this.ylsunnum;
        let redlight = 'red';
        let bluelight='#45ff6d';
        let llcolor='#fff';
        let ylcolor='#fff';
        let demoData = [
          {
            //显示变化的值
            value: data,
            //  value: 1300,
            /*unit: '℃',*/
            pos: ['50%', '50%'],
            range: [0, 1400],
            colora: 'rgba(193,136,244,0.9)',
            colorb: 'rgba(242,36,90,0.6)'
          }

        ];
        let
          option = {
         /*   legend: {
              orient: 'vertical',
              right: 10,
         /!*     left: 'left',
              bottom: 160,*!/
              textStyle: {
                color: '#fff',
                fontStyle: 'normal',
                fontWeight: 'normal',
                fontFamily: 'sans-serif',
                fontSize: 11,
              }
            },*/
            borderWidth: '5',
            borderRadius: '5',
            //修改颜色
            backgroundColor: '#3b373b',
            title: [{
              x: "23%",
              bottom: '2%',
              text: '流量m³/h',
              textStyle: {
                fontWeight: 'normal',
                fontSize: 18,
                color: "#fff"
              },
            }, {
              x: "64%",
              bottom: '5%',
              text: '压力Mpa',
              textStyle: {
                fontWeight: 'normal',
                fontSize: 18,
                color: "#fff"
              },
            }],
            series: (function () {
              var result = [];
              demoData.forEach(function (item) {
                /* if(isNaN(item.value)){
                   item.value=0;
                 }*/
                result.push(
                  // 内侧指针、数值显示
                  {
                    type: 'gauge',
                    center: ['30%', '56%'], // 默认全局居中
                    radius: '70%',
                    splitNumber: 10, //刻度数量
                    min: 0,
                    max: llsunnum,
                    /*endAngle: 45,*/
                    clockwise: true,
                    axisLine: {
                      show: true,
                      lineStyle: {
                        width: 2,
                        shadowBlur: 0,
                        color: [
                          [1, '#03B7C9']
                        ]
                      }
                    },
                    axisTick: {
                      show: true,
                      lineStyle: {
                        color: llcolor,
                        width: 1
                      },
                      length: -15,
                      splitNumber: 10
                    },
                    splitLine: {
                      show: true,
                      length: -20,
                      lineStyle: {
                        color: llcolor,
                      }
                    },
                    axisLabel: {
                      distance: -20,
                      textStyle: {
                        color: llcolor,
                        fontSize: "12",
                      }
                    },
                    pointer: { //仪表盘指针
                      show: 0
                    },
                    detail: {
                      show: false
                    },
                    data: [{
                      name: "",
                      value: 1000
                    }]
                  }, {
                    type: 'gauge',
                    center: ['30%', '55%'], // 默认全局居中
                    radius: '60%',
                    min: 0,
                    max: llsunnum,
                    /*endAngle: 45,*/
                    splitNumber: 0,
                    axisLine: { // 坐标轴线
                      lineStyle: {
                        color: [
                          [0.66, '#dddddd'],
                          [1, '#dddddd']
                        ], // 属性lineStyle控制线条样式
                        width: 4
                      }
                    },


                    axisLabel: { // 坐标轴小标记
                      textStyle: { // 属性lineStyle控制线条样式
                        fontWeight: 'bolder',
                        fontSize: 16,
                        color: 'rgba(30,144,255,0)',
                      }
                    },
                    splitLine: { // 分隔线
                      length: 10, // 属性length控制线长
                      lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                        width: 0,
                        color: '#444'
                      }
                    },
                    pointer: { // 分隔线 指针
                      color: '#666666',
                      width: 0,
                      length: 230
                    },
                    detail: {
                      show: false
                    },

                  }, {
                    name: '进水',
                    type: 'gauge',
                  /*  endAngle: 45,*/
                    radius: '100%',
                    center: ['30%', '55%'], // 默认全局居中
                    min: 0,
                    max: llsunnum,

                    axisLine: {
                      show: false,
                      lineStyle: {
                        width: 20,
                        shadowBlur: 0,
                        color: [
                          [0.2, '#00FAFC'],
                          [0.4, '#3BD542'],
                          [0.6, '#E3F424'],
                          [0.8, '#7E48DA'],
                          [1, '#E531A8']
                        ]
                      }
                    },
                    axisTick: {
                      show: false,

                    },
                    splitLine: {
                      show: false,
                      length: 20,

                    },

                    axisLabel: {
                      show: false
                    },
                    pointer: {
                      show: true,
                      length: "70%",
                      width:3,
                    },
                    detail: {
                      show: true,
                      offsetCenter: [0, '25%'],
                      textStyle: {
                        fontSize: 18,
                        color: redlight
                      }
                    },
                    itemStyle: {
                      normal: {
                        color: redlight,

                      }
                    },
                    data: [{
                      value: item.value[1][0],
                    }]
                  },{
                    type: 'gauge',
                    center: ['70%', '55%'], // 默认全局居中
                    radius: '70%',
                    splitNumber: 10, //刻度数量
                    min: 0,
                    max: ylsunnum,
                /*    startAngle: 140,
                    /!*endAngle: -45,*!/*/
                    clockwise: true,
                    axisLine: {
                      show: true,
                      lineStyle: {
                        width: 2,
                        shadowBlur: 0,
                        color: [
                          [1, '#03B7C9']
                        ]
                      }
                    },
                    axisTick: {
                      show: true,
                      lineStyle: {
                        color: ylcolor,
                        width: 1
                      },
                      length: -15,
                      splitNumber: 10
                    },
                    splitLine: {
                      show: true,
                      length: -20,
                      lineStyle: {
                        color:ylcolor,
                      }
                    },
                    axisLabel: {
                      distance: -20,
                      textStyle: {
                        color: ylcolor,
                        fontSize: "12",
                      }
                    },
                    pointer: { //仪表盘指针
                      show: 0

                    },
                    detail: {
                      show: false
                    },
                    data: [{
                      name: "",
                      value: 1000
                    }]
                  }, {
                    type: 'gauge',
                    center: ['70%', '55%'], // 默认全局居中
                    radius: '60%',
                    min: 0,
                    max: ylsunnum,
                    /*startAngle: 140,
                    endAngle: -45,*/
                    splitNumber: 0,
                    axisLine: { // 坐标轴线
                      lineStyle: {
                        color: [
                          [0.66, '#dddddd'],
                          [1, '#dddddd']
                        ], // 属性lineStyle控制线条样式
                        width: 4
                      }
                    },


                    axisLabel: { // 坐标轴小标记
                      textStyle: { // 属性lineStyle控制线条样式
                        fontWeight: 'bolder',
                        fontSize: 16,
                        color: 'rgba(30,144,255,0)',
                      }
                    },
                    splitLine: { // 分隔线
                      length: 10, // 属性length控制线长
                      lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                        width: 0,
                        color: '#444'
                      }
                    },
                    pointer: { // 分隔线 指针
                      color: '#666666',
                      width: 3,
                      length: "70%",
                    },
                    detail: {
                      show: false
                    },

                  }, {
                    name: '进水',
                    type: 'gauge',
                    /*startAngle: 140,
                    endAngle: 45,*/
                    radius: '100%',
                    center: ['70%', '55%'], // 默认全局居中

                    min: 0,
                    max: ylsunnum,

                    axisLine: {
                      show: false,
                      lineStyle: {
                        width: 25,
                        shadowBlur: 0,
                        color: [
                          [0.2, '#00FAFC'],
                          [0.4, '#3BD542'],
                          [0.6, '#E3F424'],
                          [0.8, '#7E48DA'],
                          [1, '#E531A8']
                        ]
                      }
                    },
                    axisTick: {
                      show: false,

                    },
                    splitLine: {
                      show: false,
                      length: 20,

                    },

                    axisLabel: {
                      show: false
                    },
                    pointer: {
                      width:3,
                      show: true,
                      length: "70%",
                    },
                    detail: {
                      show: true,
                      offsetCenter: [0, '25%'],
                      textStyle: {
                        fontSize: 18,
                        color: redlight
                      }
                    },
                    itemStyle: {
                      normal: {
                        color: redlight,

                      }
                    },
                    data: [{
                      value: item.value[2][0],
                    }]
                  }
                );
              });

              return result;
            })()
          };
        this.echarts.setOption(option);
      }
    }
  }

</script>

<style lang="scss" scoped>
  .echart-testa {
    height: 198px;
    width:98%;
    margin:10px;
    font-size: 16px;
    border-radius: 5px;

  }

</style>
